<template>
  <div id="app">
    <div class="row">
      <shangbufen></shangbufen>
    </div>
    <!-- 文本框 -->
    <div class="row">
      <p-input placeholder="请输入内容"></p-input>
    </div>
    <!-- 密码框 -->
    <div class="row">
      <p-input
        placeholder="密码框"
        type="password"
      ></p-input>
    </div>
    <!-- 禁用框 -->
    <div class="row">
      <p-input
        placeholder=" 文本框被禁用"
        disabled
      ></p-input>
    </div>
    <!-- v-model -->
    <div class="row">
      <p-input
        placeholder=" 请输入内容"
        v-model="value"
      ></p-input>
      {{value}}
    </div>
    <!-- 清空文本框 -->
    <div class="row">
      <p-input
        placeholder=" 请输入内容"
        v-model="value"
        clearable
      ></p-input>
    </div>
    <!-- 密码框 -->
    <div class="row">
      <p-input
        placeholder=" 请输入内容"
        v-model="value"
        type="password"
        showpassword
      ></p-input>
    </div>
   
    <!-- switch  开关-->
    <div class="row">
      <p-switch
        v-model="active"
        active-color="#ccc"
        inactive-color="green"
        name="username"
      ></p-switch>
    </div>
  </div>
</template>

<script>
import index from "./App备份";
export default {
  data() {
    return {
      value: "",
      //这里绑定的active
      active: false,
      genter: ""
    };
  },
  methods: {},
  components: {
    shangbufen: index
  }
};
</script>

<style lang="scss">
#app {
  .row {
    margin: 0px 10px 20px;
  }
  .p-input {
    width: 200px;
  }
}
</style>